<template>
	<view>
		<view class="mt-10 bg-white fs-13 text-right">
			<view class="p-16 flex flex-x-space-between under-line flex-y-center">
				<text>用户头像：</text>
				<button class="btn-normal" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image :src="form.avatar" class="w-45 h-45 rounded-circle"></image>
				</button>
			</view>
			<view class="p-16 flex under-line flex-x-space-between ">
				<text>用户昵称：</text>
				<input placeholder="请输入昵称" v-model="form.nickname" type="nickname" @change='change'
					placeholder-class="text-right" /> 
			</view>

			<view class="p-16 flex flex-x-space-between ">
				<text>手机号码：</text>
				<!-- #ifndef H5 -->
				<button class="btn-normal" open-type="getPhoneNumber" @getphonenumber="getPhone"
					v-if="!USERINFO.mobile">
					<input placeholder="点击获取" v-model="form.mobile" disabled placeholder-class="text-right" />
				</button>
				<input v-else placeholder="输入您的手机号" v-model="form.mobile" placeholder-class="text-right" />
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<input placeholder="输入您的手机号" v-model="form.mobile" placeholder-class="text-right" />
				<!-- #endif -->
			</view>
		</view>
		<view class="mt-50 px-16">
			<view class="w-p-100 bg-blue-1 py-10 rounded-30 text-white text-center fs-14" @click="updateUser">
				提交
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { useUserStore, useRefs } from "@/stores/index";
	import { $http, $tool } from '@/utils';
	const { USERINFO } = useRefs(useUserStore());
	const form = ref({
		avatar: '',
		nickname: '',
		mobile: ''
	})

	const status = ref(false)
	onLoad(() => {
		init()
	})
	const init = () => {
		// #ifdef MP-TOUTIAO
		const { setUserInfo } = useUserStore();
		tt.checkSession({
			success(res) {
				if (res.errMsg != 'checkSession:ok') {
					uni.login({
						provider: 'toutiao',
						success(res) {
							$http.post('User/login', { type: 'douyin', code: res.code }).then(res => {
								setUserInfo(res.data)
							})
						}
					})
				}
			}
		})
		// #endif

		form.value.avatar = USERINFO.value.avatar
		form.value.nickname = USERINFO.value.nickname
		form.value.mobile = USERINFO.value.mobile
	}
	const updateUser = () => {
		if (status.value == true) {
			$http.upload('upload/Upload', { filePath: form.value.avatar, name: 'file', is_hide: 1 }).then(res => {
				form.value.avatar = res.data.url
				USERINFO.value.avatar = res.data.url
				update()
			})
		} else {
			update()
		}

	}

	const update = () => {
		$http.post('User/updateUser', form.value).then(res => {
			const { setUserInfo } = useUserStore();
			USERINFO.value.nickname = form.value.nickname
			setUserInfo(USERINFO.value)
		})
	}

	const onChooseAvatar = (e) => {
		status.value = true
		form.value.avatar = e.detail.avatarUrl
	}

	const getPhone = (e) => {
		let source = 'weixin'
		// #ifdef MP-TOUTIAO
		source = 'douyin'
		// #endif

		if (e.detail.errMsg == "getPhoneNumber:ok") {
			$http.post('User/getPhone', { ...e.detail, source: source }).then(res => {
				form.value.mobile = res.data.phoneNumber
				const { setUserInfo } = useUserStore();
				USERINFO.value.mobile = form.value.mobile
				setUserInfo(USERINFO.value)
			})
		} else {
			uni.showModal({
				title: '错误提示',
				content: e.detail.errMsg
			})
		}
	}

	const change = (e) => {
		form.value.nickname = e.detail.value
	}
</script>

<style>
	.under-line {
		border-bottom: 2rpx solid #F1F1F1;
	}
</style>